<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/boostrapFileInputResources/css/fileinput.min.css}">
    <script src="/js/sweetAlert.js"></script>
    <script type="text/javascript" th:src="@{/pagesResource/ckplayer/ckplayer.js}" charset="utf-8"
            data-name="ckplayer"></script>
    <style>
        td{
            text-align:center;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div th:include="main/simpleHeader :: header"></div>
</div>
<br>
<div class="container" style="max-width: 900px;">
    <table id="table"  class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>视频ID</th>
            <th>视频标题</th>
            <th>封面</th>
            <th>收藏时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="videoInfo : ${videoPageInfo.records}">
            <td th:text="${videoInfo.videoId}"></td>
            <td th:text="${videoInfo.videoTitle}"></td>
            <td style="align-content: center">
                <img style="width:100px;height: 40px;" th:src="@{/video/getVideoCoverageImgById/} + '?videoId=' + ${videoInfo.videoId}" th:alt="${videoInfo.videoTitle}">
            </td>
            <td th:text="${videoInfo.createDate}"></td>
            <td>
                <a class="btn btn-info btn-xs" th:onclick="'displayVideoById('+${videoInfo.videoId}+')'">查看视频</a> &nbsp;  &nbsp;&nbsp;
                <a class="btn btn-warning btn-xs" th:onclick="'cancelCollect('+${videoInfo.videoId}+')'">取消收藏</a> &nbsp;  &nbsp;&nbsp;
            </td>
        </tr>
        </tbody>
    </table>
    <div >
        <div class="center " style="padding-left: 45%;!important;">
            <a th:href="@{/video/myVideoPage(page=${videoPageInfo.current}-1)}"
               th:class="${videoPageInfo.current == 1}? 'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'"
               class="btn btn-primary btn-xs" >上一页</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;
            <a th:href="@{/video/myVideoPage(page=${videoPageInfo.current}+1)}"
               th:class="${videoPageInfo.current == videoPageInfo.pages?'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'}" class="btn btn-primary btn-xs">下一页</a>
        </div>
    </div>
    <div>
        <div class="center " style="padding-left: 45%;!important;">
            当前第 [[${videoPageInfo.current}]]页,共 [[${videoPageInfo.pages}]] 页.一共 [[${videoPageInfo.total}]] 条记录
        </div>
    </div>
</div>

<!-- 查看视频的模态框 -->
<div class="modal fade" id="videoModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="text-align:center;vertical-align:middle;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">查看视频</h4>
            </div>
            <div class="modal-body" style="text-align:center;vertical-align:middle;">
                <form class="form-horizontal" role="form"  style="text-align:center;vertical-align:middle;">
                    <div class="form-group" style="text-align:center;vertical-align:middle;">
                        <div  class="col-sm-10" style="text-align:center;vertical-align:middle;padding-left: 15%;">    <!-- -->
                            <video style="width: 100%; height: 100%;text-align:center;vertical-align:middle;" id="video" controls>

                            </video>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/boostrapTemplatResources/js/html5shiv.js}"></script>
<script th:src="@{/boostrapTemplatResources/js/respond.min.js}"></script>

<!-- jQuery -->
<script th:src="@{/boostrapTemplatResources/vendor/jquery/jquery.min.js}"></script>

<!-- Bootstrap Core JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/bootstrap/js/bootstrap.min.js}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.js}"></script>

<!-- Morris Charts JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/raphael/raphael.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/vendor/morrisjs/morris.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/data/morris-data.js}"></script>

<!-- Custom Theme JavaScript -->
<script th:src="@{/boostrapTemplatResources/dist/js/sb-admin-2.js}"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script type="text/javascript">
    function displayVideoById(id) {
        $("#video")[0].src = "/video/getVideoById?videoId=" + id;
        $("#video")[0].poster = "/video/getVideoCoverageImgById?videoId=" + id;
        $("#videoModel").modal('show');
    }

    $('#videoModel').on('hidden.bs.modal', function () {
        // 执行一些动作...
        $("#video")[0].src = "";
        $("#video")[0].poster = "";
    })


    /**
     * 取消收藏
     */
    function cancelCollect(id) {
        swal({
            title: "取消收藏弹框",
            text: "您确定要取消收藏该视频吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
            if(flag) {
                $.ajax(
                    {
                        type: "GET",
                        url: "/collect/cancelCollect?videoId="+id,
                        async: false,
                        cache: true,
                        data: {

                        },
                        success: function (data) {
                            if(data["isCancel"] == true) {
                                swal("已成功取消!", {
                                    buttons: false,
                                    timer: 3000
                                });
                                window.location.reload();
                            } else {
                                swal("Error", "取消失败", "error");
                            }
                        },
                        error: function (data) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );
            }
        } );
    }
</script>
</body>
</html>